<template>
  <div class="prohibited-products-statistics">
    <nanning-screen-border-box :bgImg="bgImg">
      <screen-title>案事件统计</screen-title>
      <div class="pie-chart">
        <screen-chart @initCb="initChart"></screen-chart>
      </div>
    </nanning-screen-border-box>
  </div>
</template>

<script lang="ts">
import { pieOptions } from './options'
import { Component, Vue } from 'vue-property-decorator'
@Component({
  name: 'prohibited-products-statistics'
})
export default class ProhibitedProductsStatistics extends Vue {
  private bgImg: string = require('assets/images/box-border-1.png')

  private chartData: any = [{
    name: '刑事案件',
    value: 1678
  }, {
    name: '行政案件',
    value: 1988
  }, {
    name: '经济纠纷',
    value: 1888
  }, {
    name: '外地案件',
    value: 1788
  }, {
    name: '其他',
    value: 2888
  }]

  private avaChart: any = null

  private initChart(chart: any): void {
    this.avaChart = chart
    chart.clear()
    setTimeout(() => {
      this.avaChart.setOption(pieOptions({ data: this.chartData }))
    }, 200)
  }
}
</script>

<style lang="scss" scoped>
.prohibited-products-statistics {
  width: 100%;
  height: calc(46.81% - 10px);
  margin-bottom: 10px;
  .pie-chart {
    width: 100%;
    height: calc(100% - 70px);
    padding: 0px 2px;
    box-sizing: border-box;
  }
}
</style>
